{extend name="public:base" /}

{block name="head"}
<link href="__PUBLIC__/view_res/mobile/css/product.css" type="text/css" rel="Stylesheet" />
<link href="__PUBLIC__/jquery-weui/dist/lib/weui.min.css" type="text/css" rel="Stylesheet" />
<link href="__PUBLIC__/jquery-weui/dist/css/jquery-weui.min.css" type="text/css" rel="Stylesheet" />
<script src="__PUBLIC__/jquery-weui/dist/js/jquery-weui.min.js"></script>
<script src="__PUBLIC__/jquery-weui/dist/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<style>
	ul li{
		list-style:none
	}
	li{display:inline-block; width:100px; height:20px; border:1px solid red;}
	li a{display:block;text-align: center}
	.swiper-container {
		width: 100%;
	}
	.swiper-container img {
		display: block;
		width: 100%;
	}
	.option_name{margin-left:5px;}

	/*重载jquery-weui.min.css中样式*/
	label > * {
		pointer-events: auto;
	}
</style>
{/block}

{block name="header"}
{include file="public/top-nav" /}
{/block}

{block name="content"}

<div class="swiper-container">
	<!-- Additional required wrapper -->
	<div class="swiper-wrapper">
		<!-- Slides -->
		{volist name="image" id="image"}
		<div class="swiper-slide"><img src="IMG_ROOT{$image.image|resize=400,400}" /></div>
		{/volist}
	</div>
	<!-- If we need pagination -->
	<div class="swiper-pagination"></div>
</div>

<div id="container">
	<input type="hidden" value="{$goods.minimum}" id="quantity" name="quantity">
	<input id="goods_id" type="hidden" value="{$goods.goods_id}" name="goods_id">
	<input id="attribute_id" type="hidden" value="0" name="attribute_id">

	<p class="vpd-title" style='height:auto;'>
		{$goods.name}
	</p>

	<dl class="pd-dsc clearfix">
		<dt>银豆：</dt>
		<dt class="prices" data-price="{$goods.price|round=2}" id="pd-market-price">{$goods.price|round=2}</dt>
	</dl>

	<dl class="pd-dsc clearfix" id="product_stock_wrap">
		<dt>库存量：</dt>
		<dt id="pd-stock">{$goods.quantity}</dt>
	</dl>

	{if condition="!empty($discount)"}
	<dl class="pd-dsc clearfix" id="product_stock_wrap">
		<dt>批发价：</dt>
		{volist name="discount" id="v"}
		<br />
		<dt id="pd-stock"> {$v.quantity}{$goods.sku} 或更多 &yen; {$v.price}</dt>
		{/volist}
	</dl>
	{/if}

	{if condition="!empty($rule)"}
	<div class="pd-dsc clearfix" id="attribute">
		{volist name="rule" id="rule"}
		<button class="btn btn-default attribute" data-attribute="{$rule.attribute_value_id}" type="submit">{:get_value_name($rule.attribute_value_id)}</button>
		{/volist}
	</div>

	{/if}

	{if condition="$options"}
	<div class="options">
		<h2>可选项</h2>
		{volist name="options" id="option"}

		{if condition="$option['type'] eq 'radio' "}
		<div class="boss_check">
			<div class="box-check">
				<div id="option-{$option.goods_option_id}">
					<p><b>{$option.name}:</b>
						{if condition="$option['required'] eq 1"}
						<span class="required">*</span>
						{/if}
					</p>
					{volist name="$option['goods_option_value']" id="option_value" }
					{if condition="!empty($option_value['image'])"}
					<a title="数量{$option_value.quantity}" href="/public/uploads/{$option_value.image}">
						<img src="IMG_ROOT{$option_value.image|resize=30,30}" />
					</a>
					{/if}
					<label for="option-value-{$option_value.goods_option_value_id}">
						<input  class="option" type="radio" name="option[{$goods.goods_id},{$option.option_id}]" value="{$option_value.option_value_id}" id="option-value-{$option_value.goods_option_value_id}" />
						<span class="option_name" title="数量{$option_value.quantity}">{$option_value.name}</span>
						{if condition="$option_value['goods_price'] neq '0.00' "}
						({$option_value.price_prefix}￥{$option_value.price})
						{/if}
					</label>
					<br />
					{/volist}
				</div>
			</div>
		</div>
		{/if}

		{if condition="$option['type'] eq 'checkbox' "}
		<div class="box-check">
			<div id="option-{$option.goods_option_id}" class="option">
				<p><b>{$option.name}:</b>
					{if condition="$option['required'] eq 1"}
					<span class="required">*</span>
					{/if}
				</p>
				{volist name="$option['goods_option_value']" id="option_value" }
				{if condition="!empty($option_value['image'])"}
				<a title="数量{$option_value.quantity}" href="/public/uploads/{$option_value.image}">
					<img src="IMG_ROOT{$option_value.image|resize=30,30}" />
				</a>
				{/if}
				<input type="checkbox" name="option[{$goods.goods_id},{$option.option_id}][]" value="{$option_value.option_value_id}" id="option-value-{$option_value.goods_option_value_id}" />
				<label for="option-value-{$option_value.goods_option_value_id}">

					<span title="数量{$option_value.quantity}">{$option_value.name}</span>
					{if condition="$option_value['goods_price'] neq '0.00' "}
					({$option_value.price_prefix}￥{$option_value.price})
					{/if}
				</label>
				<br />
				{/volist}
			</div>
		</div>
		{/if}

		{/volist}
	</div>
	{/if}


</div>

<header class="Thead" id="vpd-detail-header">产品详情</header>
<div id="vpd-content" class="notload">下拉加载详细介绍</div>

{if condition="!isset($points_goods)"}
<header class="Thead">随便逛逛</header>
{if condition="isset($related_goods)"}
<div id="pd-recoment">
	<div class='pd-box clearfix'>
		{volist name="related_goods" id="d"}
		<a class="slist-item" href="{:url('goods/detail',array('id'=>$d['goods_id']))}">
			<div class='pd-box-inner'>
				<img src="IMG_ROOT{$d.image|resize=120,120}" alt='{$d.name}'/>
				<p class='Elipsis'>{$d.name}</p>
			</div>
		</a>
		{/volist}
	</div>
</div>
{/if}

{/if}

{/block}

{block name="footer"}


<div id="appCartWrap" class="clearfix" style="padding: 0 10px;">
	<a class="button" id="buy-button" style="width: 100%;" data-add="0" >立即购买</a>
</div>


{/block}

{block name="script"}
<script>
	$('.attribute').click(function(){
		var goods_id = $('#goods_id').val();
		var attribute_id = $(this).data('attribute');
		$.ajax({
			url:"{:url('points/get_attribute_money')}",
			data:{goods_id:goods_id,attribute_id:attribute_id},
			type:"post",
			success:function(data){
				if(data.code == 0){
					$('#pd-market-price').html(data.data.money);
					$('#attribute_id').val(attribute_id);
				}
			}
		});
	});


	$(function(){

		$(".swiper-container").swiper({
			loop: true,
			autoplay: 3000
		});

		/**
		 * 商品介绍是否已经加载标记
		 * @type Boolean
		 */
		var contentLoaded = false;
		/**
		 *加载商品详情
		 */
		$(window).scroll(function () {
			var totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()) - 5;
			if ($(window).height() <= totalheight && !contentLoaded) {
				$('#vpd-content').html('');
				contentLoaded = true;

				$.showLoading();
				// ajax 加载商品详情
				$.ajax({
					url: "{:url('goods/get_description',array('id'=>$goods['goods_id']))}",
					dataType: 'html',
					success: function (data) {

						$('#vpd-content').html(data);
						$('#vpd-detail-header').show();
						$('.notload').removeClass('notload');
						$('#vpd-content').fadeIn();
						// 调整图片
						$('#vpd-content img').each(function () {
							$(this).on('load', function () {
								if ($(this).width() >= document.body.clientWidth) {
									$(this).css('display', 'block');
								}
								$(this).height('auto');
							});
						});
						$('#vpd-content').find('div').width('auto');
					},
					error: function () {

					}
				});
				setTimeout(function (){
					$.hideLoading();
				}, 500);
			}
		});


		/**
		 *加入购物车
		 */
		$('#buy-button,#addcart-button').bind('click', function() {

			var quantity = $('#quantity').val();
			var goods_id = $('#goods_id').val();
			var attribute_id = 0;
			if($('#attribute').text()){
				attribute_id = $('#attribute_id').val();
				if(attribute_id == 0){
					$.toast('请选择规格','forbidden');
					return
				}
			}
			$.ajax({
				url: "{:url('Points/add')}",
				type: 'post',
				/*data: $('#container input[type=\'hidden\'],#container input[type=\'radio\']:checked,#container input[type=\'checkbox\']:checked,#container select'),*/
				data: {quantity:quantity,goods_id:goods_id,attribute_id:attribute_id},
				dataType: 'json',
				success: function(json) {
					$('.box-check').removeClass('text-error');
					$('.text-danger').remove();
					if (json.error) {

						if (json['goods_option_id']) {

							var id=json['goods_option_id'];

							var element = $('#option-'+id);

							if (element.parent().hasClass('box-check')) {
								element.parent().addClass('text-error').after('<div class="text-danger">' + json.error + '</div>');
							} else {
								element.after('<div class="text-danger">' + json.error+ '</div>');
							}

						}
						$.toast(json.error,"forbidden");

						if(json.url){
							setTimeout(function (){
								location.href=json.url;
							}, 1000);
						}
					}

					if (json.success) {
						$.showLoading();
						setTimeout(function (){
							$.hideLoading();
							location = json.success;
						}, 1000);
					}

				}
			});
		});


	});
</script>
{if condition="in_wechat()"}
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
	wx.config({
				debug: false,
				appId: '{$signPackage.appId}',
				timestamp: {$signPackage.timestamp},
			nonceStr: '{$signPackage.nonceStr}',
			signature: '{$signPackage.signature}',
			jsApiList: [
		'checkJsApi',
		'onMenuShareTimeline',
		'onMenuShareAppMessage'
	]
	});

	wx.ready(function(){

		var is_agent = '<?php echo member("is_agent"); ?>';
		var site_url='<?php echo request()->domain(); ?>';
		if(is_agent==1){
			var url =site_url+'/mobile/goods/agent_share/osc_aid/'+'<?php echo hashids()->encode(member("uid")); ?>'+'/id/'+'<?php echo input("param.id") ?>';
		}else{
			var url = '<?php echo request()->url(true); ?>';
		}

		//获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
		wx.onMenuShareTimeline({
			title: '{$goods.name}',
			link: url,
			imgUrl: site_url+'{$goods.image|resize=100,100}',
			success: function () {
				pvShareCallback(url,'分享到朋友圈');
			}
		});
		//获取“分享给朋友”按钮点击状态及自定义分享内容接口
		wx.onMenuShareAppMessage({
			title: '{$goods.name}',
			desc: '{$goods.name}',
			link: url,
			imgUrl: site_url+'IMG_ROOT{$goods.image|resize=100,100}',
			success: function () {
				pvShareCallback(url,'分享给朋友');
			}
		});
		function pvShareCallback(url,type) {

			$.post("{:url('Index/add_share')}", {
				url: url,
				uid:'<?php echo member("uid"); ?>',
				type:type
			});
		}

	});

</script>
{/if}
{/block}